import React, { useMemo, useRef, useState } from "react"
import MessageInfo from "../MessageInfo"
import { Badge, Button } from "antd"
import { Lotties } from "../Lotties"
import { LottieRefCurrentProps } from "lottie-react"
import { LottieNotification } from "../Lotties/assets"
import { useEditorContext } from "@/context/editContext"
export interface NotificationProps {}
export default (props: NotificationProps) => {
  const [list, setList] = useState([])
  const [{ SSE }, dispatch] = useEditorContext()
  const notificationLottieRef = useRef<LottieRefCurrentProps | null>(null)
  SSE?.addEventListener("notification", (event) => {
    console.log("notification:", event)
    //todo update list
  })
  const newCount = useMemo(() => {
    return list?.length
  }, [list])
  return (
    <>
      <MessageInfo trigger={"click"} key="message">
        <Button
          type="text"
          onClick={() => {
            notificationLottieRef.current?.stop()
          }}
          icon={
            <Badge count={newCount} size="small">
              <Lotties
                loop={newCount > 0}
                lottieRef={notificationLottieRef}
                animationData={LottieNotification}
              ></Lotties>
            </Badge>
          }
        ></Button>
      </MessageInfo>
    </>
  )
}
